<template>
  <div>
    <el-container>
      <!-- 左侧导航栏组件 -->
      <el-aside :style="defaultSize.aside" class="aside">
        <left-menu ref="leftMenu"></left-menu>
      </el-aside>

      <el-container>
        <!-- 顶部Header组件 -->
        <el-header class="header" :style="defaultSize.header">
          <Header :style="defaultSize.header" @collapse="collapse"></Header>
        </el-header>

        <!-- 中间内容组件 -->
        <el-main class="main"  style="background:#ddd;padding: 5px;">
          <el-tabs
            v-model="activeName"
            type="border-card"
            editable
            @tab-remove="tabRemove"
            @tab-click="tabClick"
            style="background:#fff;"
          >
            <el-tab-pane
              :key="item.name"
              v-for="(item) in editableTabs"
              :label="item.title"
              :name="item.name"
              :menuindex="item.menuindex"
            >
              <div id="div_main_view" :style="{'height':defaultSize.main.height+'px','maxHeight':defaultSize.main.height+'px',overflow:'auto'}">
                <router-view ></router-view>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
//import Vue from 'vue';
import Header from "../home/Header.vue";
import LeftMenu from "../home/LeftMenu.vue";
import router from '../../router';
import cache from '../../config/utils/cache.js';
export default {
  name: "systemIndex",
  data() {
    return {
      //默认宽高
      defaultSize: {
        aside: {
          width: "",
          height: ""
        },
        header: {
          textAlign: "left",
          padding: "0px 0px 0px 0px",
          height: "50px",
          lineHeight: "50px"
        },
        main: {
          width: "",
          height: "",
        }
      },
      //存放所有tabs
      editableTabs: [{index:'/',name:'/',title:'首页'}],
      activeName: '/', //默认激活首页菜单
    };
  },
  methods: {
    //宽度高度自适应
    autoSize() {
      this.defaultSize.aside.height = window.innerHeight-0.1 + "px";
       this.defaultSize.main.height = window.innerHeight - 135;
    },
    //重置样式
    resetStyle(){
      var dom = document.getElementsByClassName("el-tabs el-tabs--card el-tabs--top");
      console.log(dom);
      dom[0].style.marginTop = "0px";
    },
    //tab添加事件(点击左侧菜单栏触发)
    tabCreate(title,name,path) {
      //console.log(title + " " + name + " " + path);
      //1.检查tab是否已经存在
      let exist = false; //默认不存在
      this.editableTabs.forEach(tab => {
        if(tab.name == name){
          exist = true;
        }
      });
      //保存数据至缓存
  
      // cache.setCache(this.activeName, this.$data);
      // console.log("设置缓存。。。。。" + this.$data.);
      //如果存在，显示当前tab主页
      if(exist){
        this.activeName = name;
        this.$refs.leftMenu.changeMenu(name); //切换menu选中项

      } else { //如果不存在，则新建tab和主界面，并切换至新建的tab
        console.log("tab不存在，新建tab");
        var tabs = this.editableTabs;
        var tab = {title,name,path,menuindex:this.editableTabs.length+1};
        tabs.push(tab);
        this.editableTabs = tabs;
        this.activeName = tab.name;
         router.push(tab.path);
      }
    },
    //tab页移除事件
    tabRemove(name) {
      // 清除缓存
      // cache.clearCache(name);
      // console.log("已清除缓存。。。。。")
      var tabs = this.editableTabs;
      for (var i = 0; i < tabs.length; i++) {
        if (tabs[i].name == name) {
          let nextTab = tabs[i + 1] || tabs[i - 1];
          tabs.splice(i, 1); //删除索引为i的元素
          if (nextTab) {
            this.activeName = nextTab.name; //切换tab
            console.log(nextTab);
             this.$refs.leftMenu.changeMenu(nextTab.name); //切换menu选中项
             router.push(nextTab.path);
          } else {
             this.$refs.leftMenu.changeMenu(""); //tab为空时,menu补选中
             router.push("");
          }
        }
      }
    },
    //tab页选中事件
    tabClick(obj) {
      // 保存缓存
      // console.log("保存缓存。。。"+ this.$data);
      // cache.setCache(this.activeName, this.$data);
      let menuindex = obj.$attrs.menuindex;
      this.editableTabs.forEach(item => {
        if(menuindex == item.menuindex){
          this.$refs.leftMenu.changeMenu(item.name);
          router.push(item.name);
          return;
        }
      });
    },
    // 展开或收起左侧侧边栏
    collapse(){
      this.$refs.leftMenu.collapse();
    }
  },
  created() {
    //页面创建时执行一次getHeight进行赋值，顺道绑定resize事件,解决高度问题
    window.addEventListener("resize", this.autoSize);
    this.autoSize();
  },
  mounted() {
    this.resetStyle();
  },
  components: {
    Header,
    LeftMenu
  }
};
</script>


<style scoped>
.aside {
  max-width: 200px;
  color: #ddd;
  text-align: center;
  line-height: 100vh;
  height: 750px;
  background: #333;
}

.header {
  background: #2c3e50;
  line-height: 60px;
}
.main {
  background: #fff;
  text-align: left;
}
.main>>>.el-tabs__content{

}
body {
  height: 100%;
}
.el-tabs__header is-top {
  padding: 0px;
}

/**滚动条宽度*/
.aside::-webkit-scrollbar {
  width:8px;
}
/**内部滚动条*/
.aside::-webkit-scrollbar-thumb{
  border-radius:10px;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  background-color:#555;
}

/**滚动条宽度*/
#div_main_view::-webkit-scrollbar {
  width:8px;
}
/**内部滚动条*/
#div_main_view::-webkit-scrollbar-thumb{
  border-radius:10px;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  background-color:#ddd;
}
</style>